<template>
  <van-nav-bar
      title="兑换金币"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="exchange-coin">
    <p>本周学习时长：{{totalWeekStudy}}分钟</p>
    <p>可兑换学币：{{Math.floor(totalWeekStudy/30) }}</p>
    <p>本周已兑换学币：0.00</p>

    <van-cell title="学币规则"></van-cell>
    <van-divider></van-divider>

    <ul>
      <li v-for="(rule, index) in rules" :key="index" class="bbb">
        {{ rule }}
      </li>
    </ul>
    <div v-if="Math.floor(totalWeekStudy/30)<5">
      <van-button disabled type="primary" block>暂不足兑换，请继续学习</van-button>
    </div>
    <div v-else>
      <van-button type="primary" block @click="exchangeCoins">兑换学币</van-button>
    </div>
  </div>
</template>

<script setup>
import {ref,computed} from 'vue'
import {useRouter} from "vue-router";
import axios from "axios";
import {showToast} from "vant";
import {get} from "../../util/request.js";
const router=useRouter();
const studyDuration = ref(0);
const exchangeableCoins = ref(0);
const list1 = ref([
      {
        thisWeekLearning:''
      }
    ]
)
const totalWeekStudy = computed(() => {
  return list1.value.map(item => item.thisWeekLearning).reduce((sum, time) => sum + time, 0);
});
const rules = [
  "1.学币可用于购买付费课，按学币：人民币1:1的比例抵扣",
  "2.学习时长每满30分钟可兑换1学币",
  "3.观看视频、知酷、收听音频、阅读文章均可累计时长",
  "4.日学习超2小时部分不支持兑换，每周最多兑换10学币",
  "5.每周累计时长周日24点清零，请尽快兑换",
  "6.6.0以下版本学习时长，不支持兑换学币"
    ]
const onClickLeft = () => {
  router.push("/myCourse");
  // 返回按钮逻辑
};
get(
  'courseprogress/findAll'
).then(
    (data) => {
      /* debugger*/
      console.log(JSON.stringify(data))



      if (data.code == 0) {
        showToast("查询成功");
        list1.value = data.data;// 初始化界面
      } else {
        showToast("查询失败");
      }
    })
    .catch(
        function () {
          alert("服务器错误")
        }
    )
 const  exchangeCoins =()=>{
  alert("兑换成功")
 }
</script>

<style scoped>
.exchange-coin {
  padding: 20px;
}
.bbb {
  text-align: left;
}
</style>